<template>
<div id="band_card_item">
    <div class="band_card_detail">
        <img class="band_card_icon" :src="imgUrl" />
        <div class="band_card_mess">
        <span class="band_card_name">{{depositBank}}</span>
        <span class="band_card_type">{{bankType}}</span>
        </div>
    </div>
    <div class="band_card_num">
       <span class="band_card_text"
            v-for="index in cardNumber.length % 4 === 0 ? parseInt(cardNumber.length / 4) - 1 : parseInt(cardNumber.length / 4)"
            :key="index">XXXX</span>
        <span class="band_card_text">
            {{cardNumber.slice(-1 * (cardNumber.length % 4 === 0 ? 4 : cardNumber.length % 4)) }}
        </span>
    </div>
</div>
</template>

<script>
export default {
  name: 'my_card',
  props: {
    depositBank: {
        type: String,
        default: '招商银行'
    },
    bankType: {
        type: String,
        default: '储蓄卡'
    },
    cardNumber: {
        type: String,
        default: '1234567890129876',
    },
    imgUrl: {
        type: String,
        default: '',
    }
  },
  data() {
      return {
      };
  },
  mounted() {
  },
  methods: {

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">

@import	"../../css/common";

#band_card_item {
    padding: 32px;
    margin-top: 20px;
    background-color: white;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    .band_card_detail {
        display: flex;
        margin-bottom: 60px;
        .band_card_icon {
        width: 80px;
        height: 80px;
        margin-right: 24px;
        }
        .band_card_mess {
        display: flex;
        flex-direction: column;
        .band_card_name {
            font-size: 36px;
            font-weight: 500;
            color: #333333;
        }
        .band_card_type {
            font-size: 26px;
            color: #999999;
        }
        }
    }
    .band_card_num {
        .band_card_text {
        font-size: 36px;
        font-weight: 500;
        color: #333333;
        margin-right: 32px;
        }
    }
    }
</style>
      
      
      
      
     